<template>
	<view class="component cp-attendance-application flex--column">
		<view class="section shadow-box">
			<view class="row">
				<text class="title">请选择您是否要请假？</text>
				<view class="content">
					<uv-radio-group v-model="radiovalue">
						<uv-radio :customStyle="{margin: '8px'}" v-for="(item, index) in radiolist" :key="index"
							:label="item.name" :name="item.name" :disabled="item.disabled">
						</uv-radio>
					</uv-radio-group>
				</view>
			</view>
			<view class="row">
				<text class="title">请选择您要补卡的时间</text>
				<view class="content" v-if="timeList.length > 0">
					<uv-radio-group v-model="time">
						<uv-radio :customStyle="{margin: '8px'}" v-for="(item, index) in timeList" :key="index"
							:label="item.name" :name="item.name" :disabled="item.disabled">
						</uv-radio>
					</uv-radio-group>
				</view>
				<view class="content" v-else>
					<text>您不需要补卡哦~！</text>
				</view>
			</view>
			<view class="row">
				<text class="title">请填写您缺卡的理由</text>
				<view class="content">
					<textarea class="textarea" placeholder="请输入您缺卡的理由" placeholder-style="color:#666;"
						v-model="reason" />
				</view>
			</view>
			<view class="btn-box">
				<view class="btn" @tap="submit">提 交</view>
			</view>
		</view>
		<uv-tabbar :value="value" @change="index => value = index">
			<uv-tabbar-item @click="click('/pages/staff/attendance/attendance')" text="考勤">
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/staff_index/attendance/punchin--active.png"></image>
				</template>
				<template v-slot:active-icon>
					<image class="icon" src="/static/staff_index/attendance/punchin.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item @click="click('/pages/staff/attendance/attendance-application/attendance-application')"
				text="申请">
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/staff_index/attendance/application--active.png"></image>
				</template>
				<template v-slot:active-icon>
					<image class="icon" src="/static/staff_index/attendance/application.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item @click="click('/pages/staff/attendance/attendance-statistics/attendance-statistics')"
				text="统计">
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/staff_index/attendance/statistics--active.png"></image>
				</template>
				<template v-slot:active-icon>
					<image class="icon" src="/static/staff_index/attendance/statistics.png"></image>
				</template>
			</uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
	import {querypunch}from'@/request/ap_staff.js'
	export default {
		data() {
			return {
				radiolist: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				radiovalue: '否',
				value: 1,
				timeList: [{
						name: '2025-01-01上班卡',
						disabled: false
					},
					{
						name: '2025-01-01下班卡',
						disabled: false
					}
				],
				time: '',
				reason: ''
			};
		},
		onShow() {
			this.showdata()
		},
		methods: {
			click(e) {
				uni.navigateTo({
					url: e
				});
			},
			submit() {
				if (!this.reason) {
					Toast('请填写缺卡理由！');
					return;
				}
				Toast('提交成功！');
			},
			showdata() {
				let sf = uni.getStorageSync('staffInfo');
				let data = this.getNextWeekDates()
				data.forEach((i) => {
					querypunch({
						"uid": sf.id,
						"year": `${i.year}年${i.month}月${i.day}日`,
					}).then((res) => {
						console.log(res)
						res.data.data.forEach((i) => {
							this.timeList.push({
								"name":`${i.year}年${i.month}月${i.day}日`+"上班卡",
								"disabled": false
							})
						})
					})
				})
				console.log(data)
			},
			getNextWeekDates() {
				let today = new Date();
				let dates = [];

				for (let i = 1; i <= 7; i++) {
					// 复制今天的日期对象
					let date = new Date(today);
					// 将日期增加i天
					date.setDate(today.getDate() - i);
					// 将日期对象转换为年月日对象
					let dateObj = this.formatDate(date);
					dates.push(dateObj);
				}

				return dates;
			},

			// 格式化日期对象为年月日对象
			formatDate(date) {
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以加1
				let day = date.getDate().toString().padStart(2, '0');
				return {
					year,
					month,
					day
				};
			}
		}
	};
</script>

<style>
	.icon {
		width: 36rpx;
		height: 36rpx;
	}

	.section {
		background-color: #ffffff;
		/* 白色背景 */
		border-radius: 10rpx;
		/* 圆角 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		/* 阴影 */
		padding: 20rpx;
		/* 内边距 */
		margin: 27rpx;
		/* 外边距 */
	}

	.section .row {
		margin-top: 30rpx;
	}

	.section .row .title {
		font-size: 32rpx;
		color: #000000;
	}

	.section .row .content {
		font-size: 24rpx;
		color: #666666;
		margin-top: 10rpx;
	}

	.section .row .content .icon {
		width: 30rpx;
		height: 30rpx;
	}

	.section .row .content .textarea {
		padding-bottom: 20rpx;
		font-size: 28rpx;
		height: 150rpx;
		color: #333333;
	}

	.section .btn-box {
		width: 100%;
		height: 139rpx;
		border-top: 1rpx solid #efefef;
	}

	.section .btn-box .btn {
		margin: 34rpx auto;
		border-radius: 35rpx;
		background-image: linear-gradient(2.584deg, #03cfff 0%, #36a4fe 100%);
		box-shadow: 0.5rpx 5rpx 4rpx 0rpx rgba(0, 0, 0, 0.25);
		width: 220rpx;
		height: 70rpx;
		color: #fff;
		font-size: 32rpx;
		line-height: 70rpx;
		text-align: center;
	}

	.uv-radio-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.uv-radio-group .uv-radio {
		width: 290rpx;
	}
</style>